<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-aside width="150px">
            <el-row> <el-button round>负荷投切策略</el-button></el-row>
            <el-row
              ><el-button type="primary" round>负荷投切计划</el-button></el-row
            >
            <el-row
              ><el-button type="success" round>负荷预测</el-button></el-row
            >
          </el-aside>
          <el-main>
            <div id="allmap">
              <div id="table4">
                <el-row>
                  <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-style="getRowClass"
                    :header-row-style="getRowClass"
                    :header-cell-style="getRowClass2"
                    @cell-mouse-enter="changerow"
                  >
                    <el-table-column prop="name1" label="负荷名称" width="180">
                    </el-table-column>
                    <el-table-column prop="name2" label="负荷分类" width="180">
                    </el-table-column>
                    <el-table-column prop="name2" label="负荷编号" width="180">
                    </el-table-column>
                    <el-table-column prop="name3" label="负荷影响程度">
                    </el-table-column>
                  </el-table>
                </el-row>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
// import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      tableData: [
        {
          name1: '电灯',
          name2: '普通负荷',
          name3: '1',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '空调',
          name2: '大功率负荷',
          name3: '6',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '工厂机床',
          name2: '大功率负荷',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '洗衣机',
          name2: '普通负荷',
          name3: '9',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        }
      ],

      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '3',

      activeName: 'first'
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {},

  created() {},

  mounted() {},

  methods: {
    changerow() {},
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#050D11;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#050D11;color:#FEFEFE;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
    },
    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data &&
                Array.isArray(data.nodes) &&
                Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="scss" scoped>
// 当鼠标移入table中的每一行时改变每一行的颜色
.el-table__body tr:hover > td {
  background-color: #4797ed !important;
}
.el-aside {
  margin-top: 60px;
  margin-left: 50px;
}
#table4 {
  // margin-left: 300px;
  // width: 850px;
  // height: 300px;
  // background-color: #005a5b;
}
#allmap {
  // height: 600px;
  // color: white;
}

.body {
  width: 100%;
  height: 900px;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 560px;
}
</style>
